<template>
    <div class="appApproving view-body">
      <div class="top">
        <span class="name">当前位置:</span> 审核系统 > 所有审核
      </div>
      <div class="bottom">
        <div class="header">
          <div class="header-item">
            <div class="ipt-item"><span style="display: inline-block;width: 80px">状态筛选</span>
                <el-select v-model="status" placeholder="请选择" style="display: inline-block;width: 168px">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="ipt-item"><span style="display: inline-block;width: 80px;height: 26px;line-height: 26px">来源筛选</span>
              <span class="select-ipt" @click="routeIcon($event)" style="position: relative;height: 26px;width: 168px;display: inline-block;vertical-align: bottom">
                <i class="el-icon-arrow-down" style="position: absolute; right: 2px;z-index: 31;top:5px;font-size: 16px;color: #00a0dc"></i>
                <input v-model="sourceModel" type="text" style="position: absolute;width:160px;font-size: 14px;height: 24px;padding-left:8px;border: 1px solid #1e8dff;border-radius: 3px" value="11111">
              <el-select v-model="source" placeholder="请选择"
                         style="display: inline-block;
                                width: 168px;
                                opacity: 0;
                                z-index: 30;
                                ">
                <el-option
                  v-for="item in sourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </span>
            </div>
            <div class="ipt-item" style="width: 300px"><span style="width: 40px;display: inline-block">搜索</span><el-input style="width: 250px" v-model="search" placeholder="搜索订单号/姓名/手机号"></el-input></div>
          </div>
          <div class="header-item1">
            <span class="name" style="line-height: 26px;font-size: 16px">起止日期查询</span>
            <span class="date-ipt" style="position: relative;height: 26px;width: 126px;display: inline-block;vertical-align: bottom">
              <i class="el-icon-date" style="position: absolute; right: 2px;z-index: 31;top:5px;font-size: 16px;color: #00a0dc"></i>
              <input type="text" v-model="startTimeModel" style="position: absolute;width:118px;font-size: 14px;height: 24px;padding-left:8px;border: 1px solid #1e8dff;border-radius: 3px" placeholder="起始日期">
              <el-date-picker
                style="opacity: 0;z-index: 30;width: 126px"
                v-model="startTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </span>
            <span style="font-size: 16px"> - </span><span class="date-ipt" style="position: relative;height: 26px;width: 126px;display: inline-block;vertical-align: bottom">
              <i class="el-icon-date" style="position: absolute; right: 2px;z-index: 31;top:5px;font-size: 16px;color: #00a0dc"></i>
              <input type="text" v-model="endTimeModel" style="position: absolute;width:118px;font-size: 14px;height: 24px;padding-left:8px;border: 1px solid #1e8dff;border-radius: 2px" placeholder="结束日期">
              <el-date-picker
                style="opacity: 0;z-index: 30;width: 126px"
                v-model="endTime"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </span>
          </div>
          <div class="header-item2">
            <button class="btn-date">所有订单</button>
            <button class="btn-date">今天</button>
            <button class="btn-date">昨天</button>
            <button class="btn-date">本月</button>
            <button class="btn-date">本周</button>
          </div>
        </div>
        <div class="main">
          <table class="main-table">
            <thead>
              <tr>
                <th>订单号</th>
                <th>用户名</th>
                <th>手机号</th>
                <th style="position: relative">贷款次数 <div style="position:absolute;top:3px;right:0"><i class="el-icon-caret-top" style="display:block"></i><i class="el-icon-caret-bottom" style="display:block"></i></div></th>
                <th>贷款金额 </th>
                <th>申请时间 </th>
                <th>来源  </th>
                <th>审批人</th>
                <th>审批时间 </th>
                <th>订单状态</th>
                <th>详情</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableList">
                <td>{{item.orderNo}}</td>
                <td>{{item.userName}}</td>
                <td>{{item.userPhone}}</td>
                <td>{{item.loanNum}}</td>
                <td>{{item.amount}}</td>
                <td>{{item.borrowTime|formatDate}}</td>
                <td>{{sourceType[item.orderSource]}}</td>
                <td>{{item.approvalName}}</td>
                <td>{{item.approvalTime|formatDate}}</td>
                <td>{{orderType[item.status]}}</td>
                <td><span style="color: #00a0dc">查看</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="footer">
          <div class="left">
            <div class="detail">
              <span class="title">全部条数(条) : </span>
              <span class="count">  66666</span>
            </div>
            <div class="item"><span class="title">每页显示条数(条)</span>
              <!--<el-select v-model="value" placeholder="请选择" style="display: inline-block;width: 168px">-->
              <!--<el-option-->
                <!--v-for="item in options"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
              <!--</el-option>-->
            <!--</el-select>-->
            </div>
          </div>
          <div class="right">
            <el-pagination
              background
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="100"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import global from '../../global'
    import {getStorage} from "../../../common/js/localStorage";
    import {formatDate} from "../../../common/js/dateFormate";
    export default {
      name: "allApproving",
      created(){
        /*@props
         *  进入路由获取用户表格数据
         */
        this._getListData()
      },
      data(){
        return {
          tableList:[],                          //表格数据 @用于表格渲染
          sourceType:['全部','安卓','ios','微信'],//订单来源状态
          orderType:['全部','待审核','已通过','已拒绝','审核待定'],//订单状态类型
          statusOptions: [                       //当前订单状态options
            {
            value: 0,
            label: '全部'
          },{
            value: 1,
            label: '待审核'
          },{
            value: 2,
            label: '审核已通过'
          },{
            value: 3,
            label: '审核已拒绝'
          },{
            value: 4,
            label: '审核待定'
          }],
          status: 0,                             //当前订单状态
          sourceOptions:[
            {
              value: 0,
              label: '全部'
            },{
              value: 1,
              label: '安卓'
            },{
              value: 2,
              label: 'ios'
            },{
              value: 3,
              label: '微信'
            }
          ],
          source: 0,                             //当前订单来源
          search: '',                            //模糊搜索内容
          startTime:'',
          endTime:'',
          total:10000,
          currentPage:1,
          pagesType:[10,25,50,100,200],           //
          startTimeModel:'',
          endTimeModel:'',
          sourceModel:'全部'
        }
      },
      filters:{
        formatDate(time){
          if(!time){
            return ''
          }
          let date = new Date(time);
          return formatDate(date,'yyyy-MM-dd hh:mm')
        }
      },
      methods:{
        routeIcon(ev){
          
        },
        currentChange(num){
          console.log(num)
        },
        /*@props
         * 获取订单信息列表
         */
        _getListData(){
          let _this = this
          axios.post('http://'+global.$host+'/loanApply/loanList',
            {
              search_EQ_order_status:'', //订单状态 0-全部 1-待审核 2-已通过 3-已拒绝 4审核待定
              search_SH_apply_begin :'', //订单申请时间 开始时间
              search_SH_apply_end:'',    //订单申请时间 结束时间
              search_EQ_order_source:'', //订单来源 0-全部 1-安卓 2-ios 3-微信
              search_LIKE_user_phone:'', //用户手机号
              search_LIKE_order_no:'',   //订单编号
              search_LIKE_user_name:'',  //用户姓名
              page:'',                   //当前页 默认1
              length:''                  //页长度 默认10

            },
            {
              headers: {
                'Authorization': getStorage('token')
              }
            }
          )
            .then(res => {
              console.log(res)
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  // let data = res.data.data
                  let rows = res.data.data.rows
                  _this.tableList = rows
                }
              }else {
                return
              }
            })
            .catch(e => {
              console.log(e)
            })
        },
        /*@props
         * 跳转到userOrderMsg并传递orderId
         */
        _toUserMsg(orderId){
          this.$router.push({name:'userOrderMsg',query:{orderId:orderId}});
        }
      },
      computed:{
        formate(date){
         return ;
        }
      },
      watch:{
        'status'(){
          console.log(this.status)
        },
        'currentPage'(){
          console.log(this.currentPage)
        },
        'startTime'(){
          console.log(this.startTime)
          console.log(this.startTime.getFullYear()+'-'+this.startTime.getMonth()+'-'+this.startTime.getDate())
          this.startTimeModel = this.startTime.getFullYear()+'-'+this.startTime.getMonth()+'-'+(this.startTime.getDate()<10?'0'+this.startTime.getDate():this.startTime.getDate())
        },
        'endTime'(){
          this.endTimeModel = this.endTime.getFullYear()+'-'+this.endTime.getMonth()+'-'+(this.endTime.getDate()<10?'0'+this.endTime.getDate():this.endTime.getDate())
        },
        'source'(){
          this.sourceModel = this.sourceType[this.source];
        }
      }
    }
</script>

<style scoped lang="stylus">
  .appApproving
    background #F6F6F6
    padding 16px 10px
    width calc(100% - 20px)
    height calc(100% - 32px)
    .top
      width 100%
      height 40px
      background #ffffff
      color #787878
      border-radius 6px
      line-height 40px
      .name
        padding-left: 20px
    .bottom
      margin-top 16px
      width 100%
      background #ffffff
      border-radius 6px
      .header
        padding-top 14px
        .header-item
          font-size 0
          padding 0 20px
          .ipt-item
            font-size 12px
            display inline-block
            width 252px
            padding-right 24px
            span
              color #787878
              font-size 16px
        .header-item1
          padding 0 20px
          margin-top 16px
          .name
            font-size 16px
            width 112px
            color #787878
            display inline-block
        .header-item2
          padding 0 20px
          font-size 0
          margin-top 16px
          .btn-date
            background none
            border-radius 0
            border 1px solid #1E8DFF
            margin-right 8px
            height 26px
            padding 2px 10px
            font-size 14px
            line-height 22px
            cursor pointer
            color #1E8DFF
            &:hover
              background #1E8DFF
              color #ffffff

      .main
        margin-top 20px
        padding 0 10px 23px 10px
        .main-table
          width 100%
          thead
            tr
              height 38px
              background #F3F5F7
              line-height 38px
              color #787878
              font-size 14px
          tbody
            tr
              height 38px
              color #787878
              font-size 14px
              cursor pointer
              &:nth-child(odd)
                background: #ffffff;
              &:nth-child(even)
                background: #F3F5F7;
              &:hover
                background #EBEBEB
              td
                text-align center
                height 38px
                line-height 38px
      .footer
        padding 0 10px
        overflow hidden
        .left
          float left
          .detail,.item
            float left
          .detail
            height 40px
            line-height 40px
            padding-right 14px
            font-size 16px
          .item
            .title
              font-size 16px
              color #787878
              padding-right 12px
        .right
          float right
</style>
